<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>MediaStream</title>
</head>
<body>

	<video id="player" autoplay playsinline style="width:300;height: 300;"></video>

</body>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>


<script>
	
'use strict'

//获取video标签

var videoplay = document.querySelector("video#player")


//视频约束
var constraints = {
	video:{
		width:{ideal:1920},
		height:{ideal:1080},
		frameRate:15,
		facingMode:"enviroment"
	},
	audio:{
		noiseSuppression:true,
		echoCancellation:true
	}
}


if (!navigator.mediaDevices || 
	!navigator.mediaDevices.getUserMedia) {
	console.log('getUserMedia is not supported!');
}else{
	navigator.mediaDevices.getUserMedia(constraints)
	.then((stream)=>{
		//stream中包含了视频轨和音频轨
		videoplay.srcObject=stream

	})
	.catch((error)=>{

		console.log('getUserMedia error:', error)
	});
}

</script>
</html>